<template>
  <div class="main">
    <comm-back></comm-back>
    <div class="top"></div>
    <div class="body">
      <div class="riskarea">
        <div class="higharea">
          <div class="title">全国高风险地区汇总</div>
          <div class="mintitle">
            <img src="@/assets/img/high-risk.png" alt="" />
            <span>高风险地区{{ highLen }}个</span>
            <div class="deadline">
              截至北京时间 {{ createdTime | formatData }}
            </div>
          </div>
          <!-- 省份开始 -->
          <div class="region" v-for="item in higharea" :key="item.index">
            <div class="prov">{{ item.province }}</div>
            <div class="city-max">
              <div
                class="city"
                v-for="subItem in item.city"
                :key="subItem.index"
              >
                <div class="city-pro">
                  {{ subItem.city ? subItem.city : subItem.province }}
                </div>
                <div class="street">
                  {{
                    (subItem.county ? subItem.county : "") +
                    (subItem.street ? subItem.street : "") +
                    (subItem.address ? subItem.address : "")
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="midarea">
          <div class="mintitle">
            <img src="@/assets/img/mid-risk.png" alt="" />
            <span>中风险地区{{ midLen }}个</span>
            <div class="deadline">
              截至北京时间 {{ createdTime | formatData }}
            </div>
          </div>
          <!-- 省份开始 -->
          <div class="region" v-for="item in midarea" :key="item.index">
            <div class="prov">{{ item.province }}</div>
            <div class="city-max">
              <div
                class="city"
                v-for="subItem in item.city"
                :key="subItem.index"
              >
                <div class="city-pro">
                  {{ subItem.city ? subItem.city : subItem.province }}
                </div>
                <div class="street">
                  {{
                    (subItem.county ? subItem.county : "") +
                    (subItem.street ? subItem.street : "") +
                    (subItem.address ? subItem.address : "")
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommBack from "@/components/CommBack.vue";
import api from "../../api/index.js";
import smart from "address-smart-parse";
export default {
  name: "Riskarea",
  components:{
    CommBack,
  },
  data() {
    return {
      higharea: [],
      highLen: "",
      midarea: [],
      midLen: "",
      createdTime: "",
    };
  },
  methods: {
    //将城市划分好
    address(arr) {
      let add = [];
      let province = [];
      //先拆分地址
      for (const item of arr) {
        add.push(smart(item));
        province.push({ province: smart(item).province, city: [] });
      }

      //把省份去重
      let newobj = {};
      province = province.reduce((preVal, curVal) => {
        newobj[curVal.province]
          ? ""
          : (newobj[curVal.province] = preVal.push(curVal));
        return preVal;
      }, []);

      //根据省份判断 把城市分别放进 city 里
      for (const item of add) {
        for (const i of province) {
          if (item.province === i.province) {
            i.city.push(item);
          }
        }
      }
      return province;
    },
  },
  created() {
    api.getCovInfo().then((res) => {
      this.higharea = this.address([...res.data.newslist[0].riskarea.high]);
      this.highLen = res.data.newslist[0].riskarea.high.length;
      this.midarea = this.address([...res.data.newslist[0].riskarea.mid]);
      this.midLen = res.data.newslist[0].riskarea.mid.length;
      this.createdTime = res.data.newslist[0].desc.modifyTime;
      // console.log(this.higharea.length);
    });
  },
};

// 要的格式
/**
 * {
 *  province: "吉林省"
 *  city:[
 *    {
 *        address: "桦皮厂社区"
          city: "吉林市"
          cityCode: "2202"
          county: "昌邑区"
          countyCode: "220202"
          province: "吉林省"
          provinceCode: "22"
          street: "桦皮厂镇"
          streetCode: "220202101"
 *     }
 *   ]
 * }
 */
</script>


<style lang="less" scoped>
.main {
  position: relative;
  max-width: 750px;
  height: 100%;
  background-color: #f5f5f9;
}
.top {
  position: relative;
  margin-bottom: -44%;
  padding-top: 74.7%;
  width: 100%;
  height: 0;
  background-image: url(../../assets/img/area-bg.png);
  background-size: cover;
}

.mintitle {
  width: 100%;
}
.body {
  position: relative;
  width: 95%;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  background-color: #ccc;
}
.riskarea {
  padding: 0.4rem 0;
  border-radius: 5px;
  background-color: #fff;
  .title {
    font-size: 0.32rem;
    border-left: 0.1rem solid #4169e2;
    margin-bottom: 0.15rem;
    padding-left: 0.15rem;
  }
}
.higharea,
.midarea {
  padding: 0 0.2rem;
  .mintitle {
    display: flex;
    position: relative;
    justify-content: conter;
    align-items: center;
    padding: 0.2rem 0;
    img {
      width: 0.4rem;
      margin-right: 0.15rem;
    }
    .deadline {
      position: absolute;
      right: 0px;
      color: #999;
      font-size: 0.24rem;
    }
  }
}

// 省份
.region {
  display: flex;
  // align-items: center;
  margin: 0.2rem 0;
  width: 100%;
  .prov {
    // height: 100%;
    /*居中文字*/

    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    text-align: center;
    width: 0.8rem;
    font-size: 0.24rem;
    margin-right: 0.2rem;
    padding: 0.2rem 0;
    line-height: 30px;
    border-radius: 0.15rem;
    background-color: rgba(255, 91, 77, 0.1);
  }
  .city-max {
    border-radius: 15px;
    background-color: #f7f7f7;
    width: 100%;
  }
  .city {
    display: flex;
    padding: 0.2rem 0.2rem;
    font-size: 0.24rem;
    color: #333;
  }
  .city-pro {
    width: 1.2rem;
  }
}
.midarea {
  margin-top: 0.6rem;
  .prov {
    background-color: rgba(255, 170, 0, 0.1);
  }
}
</style>